<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝系统 - 仪表板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: #f5f5f5;
        }
        
        .header {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #ff6b6b;
        }
        
        .logout-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        .logout-btn:hover {
            background: rgba(255,255,255,0.3);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .welcome-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .welcome-card h2 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .welcome-card p {
            color: #666;
            line-height: 1.6;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .feature-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
        }
        
        .feature-card h3 {
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .feature-card p {
            color: #666;
            line-height: 1.6;
        }
        
        .feature-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: #ff6b6b;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .message {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #ff6b6b;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-content">
            <div class="logo">淘宝系统</div>
            <div class="user-info">
                <div class="avatar" id="userAvatar">U</div>
                <span id="username">用户</span>
                <button class="logout-btn" onclick="logout()">退出登录</button>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="message error" id="errorMessage" style="display: none;"></div>
        
        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p>加载中...</p>
        </div>
        
        <div id="content" style="display: none;">
            <div class="welcome-card">
                <h2>欢迎回来，<span id="welcomeUsername">用户</span>！</h2>
                <p>这里是您的个人仪表板，您可以在这里管理您的账户、查看订单、浏览商品等。</p>
            </div>
            
            <div class="features-grid">
                <div class="feature-card" onclick="navigateTo('products')">
                    <h3>
                        <div class="feature-icon">🛍️</div>
                        商品浏览
                    </h3>
                    <p>浏览和搜索各种商品，找到您心仪的产品。</p>
                </div>
                
                <div class="feature-card" onclick="navigateTo('cart')">
                    <h3>
                        <div class="feature-icon">🛒</div>
                        购物车
                    </h3>
                    <p>管理您的购物车，查看已添加的商品。</p>
                </div>
                
                <div class="feature-card" onclick="navigateTo('orders')">
                    <h3>
                        <div class="feature-icon">📦</div>
                        我的订单
                    </h3>
                    <p>查看您的订单历史，跟踪订单状态。</p>
                </div>
                
                <div class="feature-card" onclick="navigateTo('profile')">
                    <h3>
                        <div class="feature-icon">👤</div>
                        个人资料
                    </h3>
                    <p>管理您的个人信息和账户设置。</p>
                </div>
                
                <div class="feature-card" onclick="navigateTo('address')">
                    <h3>
                        <div class="feature-icon">📍</div>
                        收货地址
                    </h3>
                    <p>管理您的收货地址信息。</p>
                </div>
                
                <div class="feature-card" onclick="navigateTo('reviews')">
                    <h3>
                        <div class="feature-icon">⭐</div>
                        我的评价
                    </h3>
                    <p>查看您对商品的评价记录。</p>
                </div>
            </div>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number" id="totalOrders">0</div>
                    <div class="stat-label">总订单数</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-number" id="cartItems">0</div>
                    <div class="stat-label">购物车商品</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-number" id="totalSpent">¥0</div>
                    <div class="stat-label">累计消费</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-number" id="reviewsCount">0</div>
                    <div class="stat-label">评价数量</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8888/api';
        
        // 检查登录状态
        async function checkAuth() {
            const sessionToken = localStorage.getItem('sessionToken');
            if (!sessionToken) {
                window.location.href = '/index.html';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/auth/validate-session`, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${sessionToken}`
                    }
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // 显示用户信息
                    displayUserInfo(result);
                    // 加载统计数据
                    loadStats();
                    // 显示内容
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('content').style.display = 'block';
                } else {
                    // 会话无效，跳转到登录页
                    localStorage.removeItem('sessionToken');
                    localStorage.removeItem('userInfo');
                    window.location.href = '/index.html';
                }
            } catch (error) {
                showError('网络错误，请稍后重试');
                document.getElementById('loading').style.display = 'none';
            }
        }
        
        // 显示用户信息
        function displayUserInfo(user) {
            document.getElementById('username').textContent = user.username;
            document.getElementById('welcomeUsername').textContent = user.username;
            
            if (user.avatar) {
                document.getElementById('userAvatar').style.backgroundImage = `url(${user.avatar})`;
                document.getElementById('userAvatar').textContent = '';
            } else {
                document.getElementById('userAvatar').textContent = user.username.charAt(0).toUpperCase();
            }
        }
        
        // 加载统计数据
        async function loadStats() {
            try {
                // 这里可以调用实际的API来获取统计数据
                // 暂时使用模拟数据
                document.getElementById('totalOrders').textContent = '5';
                document.getElementById('cartItems').textContent = '3';
                document.getElementById('totalSpent').textContent = '¥1,299';
                document.getElementById('reviewsCount').textContent = '8';
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }
        
        // 显示错误信息
        function showError(message) {
            const errorEl = document.getElementById('errorMessage');
            errorEl.textContent = message;
            errorEl.style.display = 'block';
        }
        
        // 退出登录
        async function logout() {
            const sessionToken = localStorage.getItem('sessionToken');
            if (sessionToken) {
                try {
                    await fetch(`${API_BASE_URL}/auth/logout`, {
                        method: 'POST',
                        headers: {
                            'Authorization': `Bearer ${sessionToken}`
                        }
                    });
                } catch (error) {
                    console.error('退出登录失败:', error);
                }
            }
            
            localStorage.removeItem('sessionToken');
            localStorage.removeItem('userInfo');
            window.location.href = '/index.html';
        }
        
        // 导航到其他页面
        function navigateTo(page) {
            // 这里可以实现页面跳转逻辑
            alert(`即将跳转到${page}页面（功能开发中）`);
        }
        
        // 页面加载时检查认证状态
        window.addEventListener('load', checkAuth);
    </script>
</body>
</html> 